<template>
  <div class="dividend">
    <my-header/>
    <div class="w" v-loading="getIndexLoading" :element-loading-text="$t('unit.loading')">
      <div class="dividend-content">
        <div v-if="!buy_success" class="dividend-info">
          <h2 class="title">{{activity_name}}：{{$t('dividend.year_income')}}{{change_rate}}%</h2>
          <img class="dividend-img" src="../../assets/images/dividend-img.png" alt="">
          <p class="info">{{this.content}}</p>
          <div class="button-box clearfix">
            <button @click="$router.go(-1)" class="button fl">{{$t('btn.cancel')}}</button>
            <button class="button fr" disabled>{{$t('dividend.active_end')}}</button>
            <!-- <button class="button fr" :disabled="isError" @click="joinActive">{{$t('dividend.now_add')}}</button> -->
          </div>
        </div>
        <div v-else class="dividend-success clearfix">
          <div class="img-box fl">
            <img src="../../assets/images/dividend-success.png" alt="">
          </div>
          <div class="fr text">
            <p >{{$t('dividend.view1')}} <span class="date">{{end_at}}</span> {{$t('dividend.view2')}} <router-link to="/wallet/walletcount">{{$t('dividend.view_subaccount')}}</router-link> {{$t('dividend.view_detail')}} </p>
            <div class="btn-box">
              <button @click="init">{{$t('dividend.back')}}</button>
              <!-- <router-link to="/dividend">返回活动页</router-link> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-footer/>
    <el-dialog width="560px" :visible.sync="showSelectDialog" :show-close="false">
      <div class="dividend-dialog">
        <el-form class="dividend-form" ref="form" :model="form" label-position="left" label-width="90px">
          <el-form-item :label="$t('dividend.select_subaccount')">
            <el-select v-model="form.id" :disabled="select_disabled" :label="$t('dividend.slect_please')">
              <el-option v-for="(v,k) in sublist" :key="k" :label="v" :value="k"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <p class="p-info">{{$t('dividend.notice1')}}{{change_rate}}{{$t('dividend.notice2')}}</p>
        <div class="button-box">
          <button class="button" @click="showSelectDialog = false">{{$t('btn.cancel')}}</button>
          <button class="button" @click="choseSubAccount">{{$t('btn.confirm')}}</button>
        </div>
      </div>
    </el-dialog>
    <el-dialog width="560px" :visible.sync="showConfirmDialog" :show-close="false" :before-close="handleClose">
      <div class="dividend-dialog">
        <p class="p-info">{{$t('dividend.confirmtitle')}}</p>
        <div class="button-box">
          <button class="button" :disabled="dividendbuyloading"  @click="showConfirmDialog = false">{{$t('btn.cancel')}}</button>
          <button class="button" :disabled="dividendbuyloading" @click="submit">
            <i v-if="dividendbuyloading" class="el-icon-loading"></i>
            <template v-else>{{$t('btn.confirm')}}</template>
          </button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import myHeader from '@/components/Header';
import myFooter from '@/components/Footer';
import { sublist, getIndex, dividendbuy } from '@/api';
import { mapGetters } from 'vuex';

export default {
  name: 'dividend',
  components: {
    myHeader,
    myFooter,
  },
  data() {
    return {
      isError: true,
      getIndexLoading: false,
      dividendbuyloading: false,
      buy_success: false,
      showSelectDialog: false,
      showConfirmDialog: false,
      select_disabled: true,
      activity_name: '',
      content: '',
      change_rate: 0,
      active_id: 0, // 活动id
      end_at: '',
      form: {
        id: '', // 子账户id
      },
      sublist: [],
    };
  },
  computed: {
    ...mapGetters(['id']), // 用户id
  },
  created() {
    this.getIndex();
    this.getSublist();
  },
  methods: {
    init() {
      this.isError = true;
      this.getIndexLoading = false;
      this.dividendbuyloading = false;
      this.buy_success = false;
      this.showSelectDialog = false;
      this.showConfirmDialog = false;
      this.select_disabled = true;
      this.activity_name = '';
      this.content = '';
      this.change_rate = 0;
      this.active_id = 0; // 活动id
      this.end_at = '';
      this.form = {
        id: '', // 子账户id
      };
      this.sublist = [];
      this.getIndex();
      this.getSublist();
    },
    joinActive() {
      if (Array.isArray(this.sublist) && !this.sublist.length) {
        this.$message.warning(this.$t('dividend.unadd_subaccount'));
      } else {
        this.showSelectDialog = true;
      }
    },
    getIndex() {
      this.getIndexLoading = true;
      getIndex().then((res) => {
        if (res.data.status === 1) {
          const data = res.data.data;
          this.active_id = data.id;
          this.activity_name = data.activity_name;
          this.content = data.content;
          this.change_rate = data.change_rate;
          this.isError = false;
        } else {
          this.$message.error(this.$t(`api.${res.data.errcode}`));
          this.isError = true;
        }
        this.getIndexLoading = false;
      }).catch(() => {
        this.$message.error(this.$t('error.catchError'));
        this.getIndexLoading = false;
        this.isError = true;
      });
    },
    getSublist() {
      this.select_disabled = true;
      sublist({ uid: this.id })
        .then((res) => {
          if (res.data.status === 1) {
            this.sublist = res.data.data;
          } else {
            this.$message.error(this.$t(`api.${res.data.errcode}`));
          }
          this.select_disabled = false;
        })
        .catch(() => {
          this.$message.error(this.$t('error.catchError'));
          this.select_disabled = false;
        });
    },
    choseSubAccount() {
      if (!this.form.id) {
        this.$message.warning(this.$t('dividend.slect_please'));
        return;
      }
      this.showSelectDialog = false;
      this.showConfirmDialog = true;
    },
    handleClose(done) {
      if (!this.dividendbuyloading) {
        done();
      }
    },
    submit() {
      this.dividendbuyloading = true;
      dividendbuy({ id: this.active_id, uid: this.id, cuid: this.form.id }).then((res) => {
        if (res.data.status === 1) {
          this.end_at = res.data.data.end_at;
          this.dividendbuyloading = false;
          this.showConfirmDialog = false;
          this.buy_success = true;
        } else {
          this.$message.error(this.$t(`api.${res.data.errcode}`));
          this.dividendbuyloading = false;
          this.buy_success = false;
        }
      }).catch(() => {
        this.$message.error(this.$t('error.catchError'));
        this.dividendbuyloading = false;
        this.buy_success = false;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.dividend {
  .dividend-content {
    margin: 30px auto 140px;
    width: 1160px;
    height: 710px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.03);
    border-radius: 5px;
    border: solid 1px rgba(224, 224, 224, 0.5);
    .dividend-info {
      width: 782px;
      margin: 0 auto;
      .title {
        margin-top: 50px;
        text-align: center;
        color: #247ba0;
        font-size: 24px;
      }
      .dividend-img {
        display: block;
        margin: 0 auto;
      }
      .info {
        padding: 42px 0;
        line-height: 26px;
        font-size: 14px;
        color: #70c1b3;
      }
      .button-box {
        width: 455px;
        margin: 0 auto;
        font-size: 0;
        .button {
          display: inline-block;
          width: 200px;
          height: 50px;
          border-radius: 5px;
          border: none;
          outline: none;
          font-size: 18px;
          &:nth-child(1) {
            color: #cccccc;
            border: solid 1px #cccccc;
            background-color: #fff;
            text-align: center;
            line-height: 50px;
            &:hover{
              color: #8dcdc2;
              border-color: #8dcdc2;
            }
          }
          &:nth-child(2) {
            color: #ffffff;
            background-color: #70c1b3;
            &:hover{
              background-color: #8dcdc2;
            }
            &:disabled{
              background-color: #8dcdc2;
              cursor: not-allowed;
            }
          }
        }
      }
    }
    .dividend-success {
      padding: 200px 103px 0 137px;
      .img-box {
        font-size: 0;
        img {
          display: inline-block;
          width: 308px;
          height: 265px;
        }
      }
      .text {
        width: 480px;
        p {
          padding-top: 16px;
          color: #70c1b3;
          font-size: 24px;
          line-height: 42px;
          .date {
            color: #eb547c;
          }
          a {
            color: #247ba0;
          }
        }
        .btn-box {
          margin-top: 40px;
          text-align: center;
          button {
            color: #ffffff;
            font-size: 18px;
            width: 180px;
            height: 50px;
            background-color: #70c1b3;
            border-radius: 5px;
            &:hover{
              background-color: #8dcdc2;
            }
          }
        }
      }
    }
  }
  /deep/ .el-dialog__body{
    padding-top: 20px;
    .dividend-dialog{
      padding: 0 18px;
      .el-select{
        width: 290px;
      }
      .dividend-form{
        margin-bottom: 14px;
      }
      .p-info{
        line-height: 24px;
        font-size: 14px;
        color: #70c1b3;
      }
      .button-box{
        margin-top: 25px;
        text-align: center;
        font-size: 0;
        .button{
          width: 180px;
          height: 50px;
          border-radius: 5px;
          font-size: 18px;
          border:none;
          outline: none;
          &:disabled{
            cursor: not-allowed;
          }
          &:nth-of-type(1){
            background-color: #fff;
            color: #cccccc;
            border: solid 1px #cccccc;
            &:hover{
              color: #8dcdc2;
              border-color: #8dcdc2;
            }
          }
          &:nth-of-type(2){
            margin-left: 20px;
            color: #fff;
            background-color: #70c1b3;
            &:hover{
              background-color: #8dcdc2;
            }
          }
        }
      }
    }
  }
}
</style>
